<template>
  <div>
    <el-dialog
      :title="this.$t('LineManagementLang.ServiceFee')"
      :visible.sync="Visible"
      width="800px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div v-if="!isdetails" style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="select">
              <img style="width:12px;" src="../../../assets/img/add.png" alt="">
              <span>{{this.$t('LineManagementLang.selectServiceFee')}}</span>
            </div>
          </div>
          <MyTable
            :tableColumn="tableColumn"
            :tableData="tableData"
            :isOrder="false"
            @sendCurrentData="setCurrent"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isdetails" type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <Select
      ref="select"
      @success="selectSuccess"
    ></Select>
  </div>
</template>

<script>
import Select from "./ExpressDeliveryOrderManagement_issueAccounts_ServiceFee_select";
export default {
  components: {Select},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      isdetails:false,
      lid:"",
      Visible: false,
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Service_fee_name'),
          prop: "name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Server_charging_method'),
          prop: "chargeMethod_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Payment_unit_price'),
          prop: "unitPrice",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Payment_cost'),
          prop: "whole_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ServiceFeeManagementLang.Payment_price'),
          prop: "price",
          width: 120,
        },
      ],
      tableData: [],
      sendDataObj:{},
      serviceFeeList:[],
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(data,id,arr,isdetails) {
      this.lid=id
      this.tableData=JSON.parse(JSON.stringify(data))
      this.serviceFeeList=arr
      this.isdetails=isdetails
      this.Visible = true;
      if(!isdetails){
        this.setServiceFee()
      }
    },
    setServiceFee(){
      if(this.tableData.length>0){
        if(this.serviceFeeList.length>0){
          this.tableData.forEach(item=>{
            if(item.chargeMethod==1){
              let item_price=this.serviceFeeList.map(el=>{return this.$computing(Number(el.weight)*Number(item.unitPrice),'fixed',2)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==2){
              let item_price=this.serviceFeeList.map(el=>{return this.$computing(Number(el.volume)*Number(item.unitPrice),'fixed',2)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==4){
              let item_price=this.serviceFeeList.map(el=>{return Number(item.unitPrice)})
              item.price=item_price.reduce(function(acc, obj) {
                return acc + Number(obj);
              }, 0);
            }else if(item.chargeMethod==5){
              item.price=Number(item.unitPrice)
            }else if(item.chargeMethod==6){
              item.price=Number(item.whole_price)
            }
            item.price=this.$computing(Number(item.price),'fixed',2)
          })
        }else{
          this.tableData.forEach(item=>{
            if(item.chargeMethod==6){
              item.price=Number(item.whole_price)
            }else{
              item.price=0
            }
          })
        }
      }
    },
    select(){
      let package_sns=this.serviceFeeList.map((obj)=>{return ""+obj.package_sn}).join(",")
      this.$refs.select.init(this.lid,this.tableData,package_sns);
    },
    selectSuccess(arr){
      this.tableData=arr
      this.tableData.forEach((el,k)=>{
        el.table_code=k+1
      })
      this.setServiceFee()
    },
    // 提交
    confirm() {
      this.$emit('success',this.tableData)
      this.cancel()
    },
    //取消修改
    cancel() {
      this.tableData=[]  
      this.Visible = false;
    },
    setCurrent(data){
      this.sendDataObj=data
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>